<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="100px" size="mini">
      <el-form-item label="地点">
        <el-input v-model="formItem.location" placeholder="请输入地点" :maxlength="255" />
      </el-form-item>
      <el-form-item label="运维工程师">
        <el-select v-model="formItem.operationCode" filterable clearable :disabled="isWorker" placeholder="请选择运维工程师">
          <el-option v-for="(item) in operationUsers" :key="item.username" :label="item.name" :value="item.username" @click.native="clickUser(item)" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务请求人/处室">
        <el-input v-model="formItem.requester" placeholder="请输入服务请求人/处室" :maxlength="255" />
      </el-form-item>
      <el-form-item label="服务用时(小时)">
        <el-input v-model="formItem.serviceTime" placeholder="请输入服务用时(小时)" :maxlength="255" />
      </el-form-item>
      <el-form-item label="服务描述">
        <el-input v-model="formItem.serviceDesc" placeholder="请输入服务描述" :maxlength="255" />
      </el-form-item>
      <el-form-item label="完成状态">
        <el-select v-model="formItem.status" filterable clearable placeholder="请选择">
          <el-option v-for="(item) in statusLists" :key="item.code" :label="item.name" :value="item.code" @click.native="clickStatus(item)" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'ValueAddedDialog',
  props: {
    valueAddedDialogData: {
      required: true,
      type: Object
    },
    operationUsers: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      formItem: JSON.parse(JSON.stringify(this.valueAddedDialogData)),
      statusLists: [
        {
          code: 0,
          name: '未完成'
        }, {
          code: 1,
          name: '完成'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      name: state => state.user.name
    }),
    ...mapGetters([
      'roles'
    ]),
    isWorker() {
      return this.roles.some(r => r === 'worker')
    }
  },
  created() {
    const me = this.operationUsers.find(u => u.name === this.name)
    if (me) {
      this.formItem.operationCode = me.username
    } else {
      this.formItem.operationCode = this.operationUsers.length > 0 ? this.operationUsers[0].username : ''
    }
  },
  methods: {
    clickUser(item) {
      this.formItem.operationName = item.name
    },
    clickStatus(item) {
      this.formItem.status = item.code
    }
  }
}
</script>
